<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bg {
            background-image: url("./lazyImg/09.png");
        }
    </style>
</head>

<body>
    <!-- <img src="./lazyImg/09.png" alt="" style="display: none;"> -->
    <!-- <div class="bg"></div> -->
    <button id="btn">即将加载图片</button><br>
    <ul>
        <li>
            <!-- 需要预加载的图片标签 -->
            <!-- <img src="./lazyImg/01.jpeg" width="200"> -->
        </li>
        <li>
            <!-- <img src="./lazyImg/02.jpeg" width="200"> -->
        </li>
    </ul>
    <!-- 
        预加载 (资源预加载)
        前端性能优化的一种技术, 预先告知浏览器某些资源需要进行提前加载(提前使用)

        为什么要使用预加载?
        1. 为了用户更好的体验, 提前预知用户需要的资源加载
        2. 减少用户请求时间

        缺点
        增加服务器压力(资源的加载负载)

        预加载实现原理
        1. html+css实现
        2. css background实现
        3. css+js实现
    -->

    <script>
        let btn = document.getElementById("btn");
        // 用于存预加载的图片标签(处理好的图片)
        let imgArr = [];
        // 获取li
        let list = document.querySelectorAll("li");

        // 提前处理
        preload();
        // 封装预加载函数
        function preload() {
            // 创建需要预加载的图片
            list.forEach((el, idx) => {
                let newImg = new Image(200);
                newImg.src = `./lazyImg/0${idx+1}.jpeg`;
                // 处理好的图片标签push到数组里面
                imgArr.push(newImg);
            });
        }


        btn.addEventListener("click", () => {
            list[0].appendChild(imgArr[0])
            list[1].appendChild(imgArr[1])

            // 手动创建图片标签
            // let newImg = new Image(300);
            // newImg.src = "./lazyImg/09.png";
            // document.body.appendChild(newImg);
            // console.log(newImg);


            // 获取预先加载的图片标签, 并且插入到body里面 (html+css实现)
            // let img = document.querySelector("img");
            // img.style.display = "block";
            // document.body.appendChild(img);

            // let bg = document.querySelector(".bg");
            // // console.log(bg.style);
            // // console.log(getComputedStyle(bg).backgroundImage.slice(5, -2));
            // let imgSrc = getComputedStyle(bg).backgroundImage.slice(5, -2);
        })
    </script>
</body>

</html>